.card {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  transition: all var(--transition-normal);
  box-shadow: 0 4px 12px var(--glass-shadow);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--glass-shadow);
  border-color: var(--accent-primary);
}

.card-clickable {
  cursor: pointer;
}

.card-gradient {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  border: none;
  color: white;
}

.card-gradient:hover {
  transform: translateY(-2px) scale(1.02);
}

